import React, { PureComponent } from 'react';
import { connect } from 'dva/index';
import {
  Row,
  Empty,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Steps,
  Radio,
  Table,
} from 'antd/lib/index';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import ExportJsonExcel from 'js-export-excel';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';

/* eslint react/no-multi-comp:0 */
@connect(({ billSituationRule, loading }) => ({
  billSituationRule,
  loading: loading.models.ruleTest,
}))
@Form.create()
class RyBillSafeSituation extends PureComponent {
  state = {
    filterData: [],
    expandForm: false, // 查询菜单栏 是否显示
    listLoading: false,
    formValues: {
      productId: 1,
      billType: 0,
      orderItem: 0,
      orderType: 0,
      stock: '',
    }, // 查询菜单栏   查询参数
    modalVisible: false,
    updateModalVisible: false,

    selectedRows: [],

    stepFormValues: {},

    dataTradeList: {},
    updateParam: true,

    HistogramModalVisible: false,
    suggestions: [],
    textboxValues: {
      key: '',
      type: 1,
    },
  };

  indexCountColumns = [];

  excelData = [];

  groupRender = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };

    if (this.indexCountColumns.length > 0) {
      let isHave = false;
      for (let i = 0; i < this.indexCountColumns.length; i++) {
        if (index === this.indexCountColumns[i].index) {
          isHave = true;
          obj.props.rowSpan = this.indexCountColumns[i].count;
        }
      }
      if (!isHave) {
        if (value) {
          obj.props.rowSpan = 0;
          obj.props.colSpan = 0;
        } else {
          obj.props.rowSpan = 0;
        }
      }
    }
    return obj;
  };

  renderContentBase = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };
    return obj;
  };

  columns = [
    {
      title: '票据类型',
      dataIndex: 'billName',
      render: this.groupRender,
      key: 'billName',
      width: 100,
    },
    {
      title: '票据序号',
      dataIndex: 'billId',
      render: this.renderContentBase,
      key: 'billId',
      width: 130,
    },
    {
      title: '票据金额',
      dataIndex: 'amountOfMoney',
      render: this.renderContentBase,
      key: 'amountOfMoney',
      width: 100,
    },
    {
      title: '票息',
      dataIndex: 'billCoupon',
      render: this.renderContentBase,
      key: 'billCoupon',
      width: 110,
    },

    {
      title: '最差股票',
      dataIndex: 'stockId',
      render: this.renderContentBase,
      key: 'stockId',
      width: 110,
    },
    {
      title: '最差股票距离执行价比例',
      dataIndex: 'toStrikePriceRate',
      render: this.renderContentBase,
      key: 'toStrikePriceRate',
      width: 120,
    },
    {
      title: '收益率',
      dataIndex: 'profitRate',
      render: this.renderContentBase,
      key: 'profitRate',
      width: 110,
    },

    {
      title: '收益',
      dataIndex: 'profitValue',
      render: this.renderContentBase,
      key: 'profitValue',
      width: 100,
    },
  ];

  // 默认加载数据-起始方法
  render() {
    const {
      billSituationRule: { safeBilldata },
      loading,
      total,
    } = this.props;
    const {
      selectedRows,
      modalVisible,
      updateModalVisible,
      stepFormValues,
      listLoading,
    } = this.state;
    const newdata = {
      list: [],
      pagination: '',
    };
    if (safeBilldata.code == 1) {
      newdata.list = safeBilldata.list;
    }

    this.indexCountColumns = [];
    let indexTemp = 0;
    let countTemp = 1;
    for (let i = 0; i < newdata.list.length; i++) {
      newdata.list[i].key = `00${i}`;
      // newdata.list[i].costPrice = parseFloat(newdata.list[i].costPrice).toFixed(4);
      // if (newdata.list[i].nowPrice){
      //   newdata.list[i].nowPrice = parseFloat(newdata.list[i].nowPrice).toFixed(4);
      // }
      // if (newdata.list[i].billDueDate.length>10){
      //   newdata.list[i].billDueDate = newdata.list[i].billDueDate.substring(0, 10);
      // }
      // if (newdata.list[i].earningsDate&&newdata.list[i].earningsDate.length>10){
      //   newdata.list[i].earningsDate = newdata.list[i].earningsDate.substring(0, 10);
      // }
      if (newdata.list[i].billCoupon && newdata.list[i].billCoupon > 0) {
        newdata.list[i].billCoupon = `${parseFloat(newdata.list[i].billCoupon * 100).toFixed(2)}%`;
      }
      if (newdata.list[i].profitRate && newdata.list[i].profitRate > 0) {
        newdata.list[i].profitRate = `${parseFloat(newdata.list[i].profitRate * 100).toFixed(2)}%`;
      }
      if (i > 0) {
        if (newdata.list[i].billName === newdata.list[i - 1].billName) {
          countTemp++;
          if (i === newdata.list.length - 1) {
            this.indexCountColumns.push({
              index: indexTemp,
              count: countTemp,
            });
          }
        } else {
          this.indexCountColumns.push({
            index: indexTemp,
            count: countTemp,
          });
          indexTemp = i;
          countTemp = 1;
          if (i === newdata.list.length - 1) {
            this.indexCountColumns.push({
              index: indexTemp,
              count: countTemp,
            });
          }
        }
      }
    }
    this.excelData = newdata;
    return (
      <PageHeaderWrapper title="瑞银即将到期安全票据">
        <Card bordered={false}>
          <div>
            <div>
              <Button style={{ top: 20, bottom: 30 }} onClick={this.downloadExcel}>
                导出Excel表格
              </Button>
            </div>
            <br />
            <br />
            {newdata.list.length == 0 ? (
              <Empty />
            ) : (
              <Table
                style={{ top: 20 }}
                pagination={false}
                scroll={{ x: 1500 }}
                columns={this.columns}
                dataSource={newdata.list}
                bordered
              />
            )}
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }

  downloadExcel = () => {
    const data = this.excelData.list; // 表格数据
    const option = {};
    const dataTable = [];
    if (data) {
      for (const i in data) {
        if (data) {
          const obj = {
            票据类型: data[i].billName,
            票据序号: data[i].billId,
            票据金额: data[i].amountOfMoney,
            票息: data[i].billCoupon,
            最差股票: data[i].stockId,
            最差股票距离执行价比例: data[i].toStrikePriceRate,
            收益率: data[i].profitRate,
            收益: data[i].profitValue,
          };
          dataTable.push(obj);
        }
      }
    }
    option.fileName = '瑞银即将到期安全数据';
    // const borderAll = {  //单元格外侧框线
    //   top: {
    //     style: 'thin'
    //   },
    //   bottom: {
    //     style: 'thin'
    //   },
    //   left: {
    //     style: 'thin'
    //   },
    //   right: {
    //     style: 'thin'
    //   }
    // };
    // option.workbook = {
    //   SheetNames: ['Sheet1'],
    //   Sheets: {
    //     Sheet1: {
    //       '!ref': 'A1:D4',
    //       '!cols': [{wpx: 45}, {wpx: 165}, {wpx: 45}, {wpx: 45}],
    //       '!merges': [{
    //         s: {c: 0, r: 0},
    //         e: {c: 3, r: 0}
    //       }],
    //       A1: {
    //         v: '采购单',
    //         t: 's',
    //         s: {
    //           font: {
    //             sz: 18,
    //             bold: true
    //           },
    //           alignment: {
    //             horizontal: 'center'
    //           }
    //         }
    //       },
    //       A2: {
    //         v: '序号',
    //         t: 's',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       B2: {
    //         v: '商品名称',
    //         t: 's',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       C2: {
    //         v: '数量',
    //         t: 's',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       D2: {
    //         v: '颜色',
    //         t: 's',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       A3: {
    //         v: 1,
    //         t: 'n',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       B3: {
    //         v: '商品1',
    //         t: 's',
    //         s: {
    //           border: borderAll
    //         }
    //       },
    //       C3: {
    //         v: 100,
    //         t: 'n',
    //         s: {
    //           border: borderAll,
    //           font: {
    //             color: {
    //               rgb: 'FF4F81BD'  //字体颜色
    //             }
    //           }
    //         }
    //       },
    //       D3: {
    //         v: '',
    //         s: {
    //           border: borderAll,
    //           fill: {
    //             fgColor: {
    //               rgb: 'FFC0504D'  //背景颜色
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // };
    const merges = [];
    if (this.indexCountColumns.length > 0) {
      for (let i = 0; i < this.indexCountColumns.length; i++) {
        merges.push({
          s: { c: 0, r: this.indexCountColumns[i].index + 1 },
          e: { c: 0, r: this.indexCountColumns[i].index + this.indexCountColumns[i].count },
        });
      }
    }
    option.merges = merges;
    // option.merges = [
    //   {  //合并第四行（C4）第三列到第五列
    //     s: {//s为开始
    //       c: 0,//开始列
    //       r: 1//开始取值范围
    //     },
    //     e: {//e结束
    //       c: 0,//结束列
    //       r: 1//结束范围
    //     }
    //   },
    //
    //   {  //合并第四行（C4）第三列到第五列
    //     s: {//s为开始
    //       c: 0,//开始列
    //       r: 2//开始取值范围
    //     },
    //     e: {//e结束
    //       c: 0,//结束列
    //       r: 7//结束范围
    //     }
    //   },
    //
    //   {  //合并第四行（C4）第三列到第五列
    //     s: {//s为开始
    //       c: 0,//开始列
    //       r: 8//开始取值范围
    //     },
    //     e: {//e结束
    //       c: 0,//结束列
    //       r: 8//结束范围
    //     }
    //   },
    // ],
    option.datas = [
      {
        sheetData: dataTable,
        sheetName: 'sheet',
        sheetFilter: [
          '票据类型',
          '票据序号',
          '票据金额',
          '票息',
          '最差股票',
          '最差股票距离执行价比例',
          '收益率',
          '收益',
        ],
        sheetHeader: [
          '票据类型',
          '票据序号',
          '票据金额',
          '票息',
          '最差股票',
          '最差股票距离执行价比例',
          '收益率',
          '收益',
        ],
        columnWidths: [
          { wpx: 165 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 85 },
          { wpx: 165 },
          { wpx: 85 },
          { wpx: 85 },
        ],
      },
    ];
    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  };

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    dispatch({
      type: 'billSituationRule/SafeBill',
      payload: formValues,
      callback: response => {
        let sumAmountOfMoney = 0;
        let sumProfitValue = 0;
        for (let i = 0; i < response.list.length; i++) {
          sumAmountOfMoney += parseFloat(response.list[i].amountOfMoney);
          sumProfitValue += parseFloat(response.list[i].profitValue);
        }
        response.list.push({
          billName: '总计',
          amountOfMoney: sumAmountOfMoney,
          profitValue: sumProfitValue,
        });
      },
    });
  }
}
export default RyBillSafeSituation;
